<template>
  <div class="container">
    <div class="courses">
      <div class="analysis-content">
        <img
          v-if="studentInfo.avatarPath"
          :src="studentInfo.avatarPath"
          alt="课程"
          class="course-img"
        />
        <div v-else class="default-img">{{ studentInfo.studentName }}</div>
        <div>
          <h4>{{ studentInfo.studentName }}</h4>
          <div class="details">
            <span>学号：{{ studentInfo.studentNo }}</span>
          </div>
        </div>
      </div>
      <div class="personal-center">
        <div class="center-grid">
          <div class="center-item">
            <p class="tip">当前得分</p>
            <p class="content blue">{{ studentInfo.score }}</p>
          </div>
          <div class="center-item">
            <p class="tip">提交次数</p>
            <p class="content puple">{{ studentInfo.submitCount }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="activity">
      <div class="video-upload">
        <div class="upload-title">
          <h6>训练视频</h6>
          <!-- <span class="label">训练视频</span> -->
          <div class="video-actions">
            <van-button
              :class="activeBtn == 'original' ? 'active-btn' : ''"
              size="mini"
              @click="showOriginal"
              >原视频</van-button
            >
            <van-button
              :class="activeBtn == 'analyze' ? 'active-btn' : ''"
              size="mini"
              @click="analyzeVideo"
              >AI解析</van-button
            >
          </div>
        </div>

        <!-- 上传后显示视频 -->
        <div v-if="videoUrl && activeBtn == 'original'" class="upload-container">
          <van-icon name="cross" @click="deleteFile" />
          <video controls :src="videoUrl" style="max-width: 100%; margin-top: 16px"></video>
        </div>
        <div v-if="!videoUrl">
          <van-uploader
            v-model="videoFile"
            :after-read="onUploadVideo"
            :preview-image="false"
            accept="video/*"
            :max-count="1"
            upload-text="点击选择视频"
          />
          <!-- <van-uploader
            v-model="videoFile"
            :after-read="onUploadVideo"
            :preview-image="false"
            accept="video/*"
            :max-count="1"
          >
            <van-button type="primary">上传文件</van-button>
          </van-uploader> -->
        </div>
        <div
          v-if="studentInfo.analysisVideoPath && activeBtn == 'analyze'"
          class="upload-container"
        >
          <video
            controls
            :src="studentInfo.analysisVideoPath"
            style="max-width: 100%; margin-top: 16px"
          ></video>
        </div>
      </div>
      <div class="analysis-section">
        <h6>分析结果</h6>
        <div class="analysis-container" v-if="studentInfo.synthesisSpeed">
          <div class="analysis-item-container">
            <div class="analysis-item height">
              <span class="label">速度得分</span>
              <span class="value">{{ studentInfo.synthesisSpeed }}</span>
            </div>
            <div class="analysis-item frequency">
              <span class="label">姿态得分</span>
              <span class="value">{{ studentInfo.synthesisGesture }}</span>
            </div>
            <div class="analysis-item hand">
              <span class="label">节奏得分</span>
              <span class="value">{{ studentInfo.synthesisRhythm }}</span>
            </div>
            <!-- <div class="analysis-item body">
              <span class="label">身体平衡</span>
              <span class="value">需改进</span>
            </div> -->
          </div>
          <div v-if="studentInfo.scoreDescription" class="analysis-comment">
            {{ studentInfo.scoreDescription }}
          </div>
        </div>
        <div v-else class="no-ai-result">
          <div class="icon"><van-icon name="warning" /></div>
          <p class="title">暂无分析数据</p>
          <p class="tip">请先上传视频进行AI分析</p>
        </div>
      </div>

      <div class="teacher-comments">
        <h6>AI建议</h6>
        <div class="teacher-container">
          <div v-if="studentInfo.aimodelDescriotion" class="no-comment">
            {{ studentInfo.aimodelDescriotion }}
          </div>
          <div v-else class="no-comment">暂无AI建议</div>
        </div>
      </div>

      <van-button class="full-btn" type="primary" @click="submitPractise">提交练习</van-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { UploaderFileListItem } from 'vant'
import { uploadFile, getFilePath } from '@/api/upload'
import { getStudentGroupAnalysisRequest, commitGroupPractiseRequest } from '@/api/course'
import { useRoute } from 'vue-router'
import useUserStore from '@/stores/user'
const userStore = useUserStore()
const userInfo = userStore.userInfo
const studentNo = userInfo ? userInfo.studentNo : ''

const route = useRoute()

const studentInfo = ref({})
const videoTypes = ['mp4', 'wmv', 'avi', 'mpeg']
const imgTypes = ['png', 'jpg', 'jpeg']
const audioTypes = ['mp3']

const activeBtn = ref<'original' | 'analyze'>('original')
const videoFile = ref<UploaderFileListItem[]>([])
const videoUrl = ref<string | null>('')

// 定义对象类型
interface FilePath {
  name: string
  url: string
}
const fileParam = ref<FilePath>({
  name: '',
  url: '',
})
const onUploadVideo = async (items: UploaderFileListItem | UploaderFileListItem[]) => {
  const files = Array.isArray(items) ? items : [items]
  console.log('files', items, items.file)
  if (files.length > 0 && files[0].file) {
    videoUrl.value = URL.createObjectURL(files[0].file)
  }
  const file = items.file as File
  const res = await uploadFile(file)
  fileParam.value = res.data
}
const deleteFile = () => {
  videoUrl.value = null
  videoFile.value = []
  fileParam.value = { name: '', url: '' }
}
const showOriginal = () => {
  activeBtn.value = 'original'
}

const analyzeVideo = () => {
  activeBtn.value = 'analyze'
}
// 根据resourceUrl返回文件类型
function getFileType(url) {
  // 提取文件扩展名（转换为小写以兼容大小写）
  const extension = url.split('.').pop().toLowerCase().split('?')[0] // 处理可能的查询参数

  if (videoTypes.includes(extension)) {
    return 'video'
  } else if (imgTypes.includes(extension)) {
    return 'image'
  } else if (audioTypes.includes(extension)) {
    return 'audio'
  } else {
    return 'unknown'
  }
}
const submitPractise = async () => {
  if (!fileParam.value.url) {
    showToast('请上传视频！')
    return
  }
  const res = await getFilePath({ filePath: fileParam.value.url })
  const taskId = res.data.taskId
  const submitRes = await commitGroupPractiseRequest({
    groupingId: route.query.groupingId,
    studentId: route.query.studentId,
    videoPath: fileParam.value.url,
    taskId: taskId,
  })
  // console.log('submitRes', submitRes)
  if (submitRes.code == 200) {
    showSuccessToast('提交成功！')
    getStudentGroupDetail()
  }
}

const getStudentGroupDetail = async () => {
  const params = {
    groupingId: route.query.groupingId,
    studentId: route.query.studentId,
  }
  const res = await getStudentGroupAnalysisRequest(params)
  studentInfo.value = res.data
  studentInfo.value.aimodelDescriotion = res.data.aimodelDescriotion.replace(/\*/g, '')
  videoUrl.value = res.data.videoPath
}
onActivated(() => {
  // getHomework()
  getStudentGroupDetail()
})
</script>

<style scoped lang="scss">
.container {
  padding: 10px;
}
.courses {
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #ffffff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  .analysis-content {
    display: flex;
    align-items: center;
    gap: 10px; /* 图片和文字的间距 */
    flex: 1; /* 占据左侧所有可用空间 */
    h4 {
      color: #1f2937;
      font-size: 15px;
      font-weight: bold;
      // margin-bottom: 5px;
    }
    .default-img {
      width: 50px;
      height: 50px;
      border-radius: 8px;
      margin-right: 15px;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #d9d9d9;
      margin-bottom: 15px;
    }
  }

  .course-img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    margin-right: 15px;
    object-fit: cover;
  }
  .details span {
    color: #666;
    font-size: 12px;
  }
  .center-grid {
    display: flex;
    gap: 15px;
    padding: 20px 0px;
    justify-content: space-between;
  }

  .center-item {
    display: flex;
    width: 80px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    .tip {
      color: #6b7280;
      font-size: 12px;
      font-weight: normal;
    }
    .content {
      font-size: 16px;
      font-weight: bold;
      &.blue {
        color: #3b82f6;
      }
      &.green {
        color: #22c55e;
      }
      &.puple {
        color: #a855f7;
      }
    }
  }
}

.example-video {
  .label {
    color: #374151;
    // font-weight: bolder;
    font-size: 14px;
    line-height: 40px;
  }
  .video-tip {
    font-size: 12px;
    color: #6b7280;
  }
}
video {
  border-radius: 5px;
}
.activity {
  // margin-top: 20px;
  padding: 10px;
  .video-upload {
    margin-top: 10px;
    .upload-title {
      display: flex;
      justify-content: space-between; /* 这将使子元素分别靠左和靠右 */
      align-items: center; /* 垂直居中 */
      width: 100%;
      .label {
        color: #374151;
        font-size: 14px;
      }
      .video-actions {
        // float: right;
        display: flex;
        gap: 8px; /* 给按钮之间添加一些间距 */
        .active-btn {
          color: #2563eb;
          background: #dbeafe;
        }
      }
    }
  }
  .upload-container {
    position: relative;
    .van-icon-cross {
      position: absolute;
      font-size: 20px;
      right: 0px;
      top: 22px;
      color: rgb(251, 250, 250);
      z-index: 99;
    }
  }
}
:deep(.van-uploader) {
  margin: 10px 0;
  width: 100%;
  .van-uploader__upload {
    width: 100%;
    border-radius: 5px;
  }
}
.analysis-section {
  margin-top: 10px;
  .analysis-item-container {
    margin-top: 10px;
    // border-radius: 5px;
    // background: #f9fafb;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .analysis-item {
      box-sizing: border-box;
      width: 48%;
      padding: 10px;
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;
      gap: 10px;
      &.height {
        background: #eff6ff;
        border-radius: 7px;
        .label {
          color: #6b7280;
          font-size: 12px;
        }
        .value {
          color: #3b82f6;
          font-size: 14px;
        }
      }
      &.frequency {
        background: #f0fdf4;
        border-radius: 7px;
        .label {
          color: #6b7280;
          font-size: 12px;
        }
        .value {
          color: #22c55e;
          font-size: 14px;
        }
      }
      &.hand {
        background: #faf5ff;
        border-radius: 7px;
        .label {
          color: #6b7280;
          font-size: 12px;
        }
        .value {
          color: #a855f7;
          font-size: 14px;
        }
      }
      &.body {
        background: #fefce8;
        border-radius: 7px;
        .label {
          color: #6b7280;
          font-size: 12px;
        }
        .value {
          color: #eab308;
          font-size: 14px;
        }
      }
    }
  }
  .analysis-comment {
    color: #6b7280;
    font-size: 14px;
    white-space: pre-line;
    background: #f9fafb;
    padding: 10px;
  }
  .label {
    font-size: 14px;
    color: #374151;
  }
  .value {
    font-size: 14px;
    color: #6b7280;
  }
  .van-icon-star {
    font-size: 14px;
    color: #ffd21e;
    margin-right: 5px;
  }
  .van-icon-info,
  .van-icon-clock {
    font-size: 14px;
    color: #3b82f6;
    margin-right: 5px;
  }
  .no-ai-result {
    margin: 10px 0;
    padding: 20px;
    display: flex;
    // justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background-color: #f7f8fa;
    border-radius: 5px;
    .van-icon-warning {
      color: #dcdee0;
    }
    .title {
      color: #6b7280;
      font-size: 14px;
    }
    .tip {
      color: #9ca3af;
      font-size: 12px;
    }
  }
}
.full-btn {
  margin: 10px 0;
  width: 100%;
}
.teacher-comments {
  margin-top: 10px;
  .teacher-container {
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
    background: #f9fafb;
  }
  .van-icon-user {
    font-size: 14px;
    color: #3b82f6;
    margin-right: 5px;
  }
  .van-icon-clock {
    font-size: 14px;
    color: #6b7280;
    margin-left: 5px;
    margin-right: 5px;
  }
  .time {
    font-size: 14px;
  }
  .comment-content {
    margin: 10px 0;
    color: #6b7280;
    font-size: 14px;
  }
  .no-comment {
    margin: 10px 0;
    color: #6b7280;
    font-size: 14px;
    white-space: pre-line;
  }
  .value {
    font-size: 14px;
    color: #6b7280;
  }
}
</style>
